<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    
    <style>
    body {
    font-family: Arial, sans-serif; /* 设置页面字体为Arial，如果没有则使用无衬线字体 */
    margin: 0; /* 移除页面的默认外边距 */
    padding: 0; /* 移除页面的默认内边距 */
}
.header {
    background-color: #f8f8f8; /* 设置头部背景颜色为浅灰色 */
    padding: 10px; /* 头部内边距为10px */
    display: flex; /* 使用弹性盒子布局 */
    justify-content: space-between; /* 头部内的元素分散对齐 */
    align-items: center; /* 头部内的元素垂直居中对齐 */
    border-bottom: 1px solid #e0e0e0; /* 头部底部边框为1px的灰色实线 */
}
.logo {
  display: flex; /* 使用弹性盒子布局 */
  align-items: center; /* 子项垂直居中 */
}

/* Logo图片样式 */
.logo img {
  height: 40px; /* 图片高度 */
  margin-right: 10px; /* 图片右侧外边距 */
}

/* 搜索栏样式 */
.search-bar {
  flex-grow: 1; /* 允许搜索栏占据额外空间 */
  margin: 0 20px; /* 左右外边距 */
  display: flex; /* 使用弹性盒子布局 */
  align-items: center; /* 子项垂直居中 */
}

/* 搜索栏输入框样式 */
.search-bar input[type="text"] {
  padding: 10px; /* 内边距 */
  border: 1px solid #e0e0e0; /* 边框 */
  border-radius: 4px; /* 边框圆角 */
  width: 100%; /* 宽度100% */
}

/* 搜索栏按钮样式 */
.search-bar button {
  padding: 10px; /* 内边距 */
  margin-left: 10px; /* 左侧外边距 */
  background-color: #ffd700; /* 背景颜色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 边框圆角 */
  cursor: pointer; /* 鼠标手型 */
}
.search-bar {
    flex-grow: 1; /* 搜索栏占据剩余空间 */
    margin: 0 20px; /* 搜索栏左右外边距为20px */
    display: flex; /* 使用弹性盒子布局 */
    align-items: center; /* 搜索栏内的元素垂直居中对齐 */
}
.search-bar input[type="text"] {
    padding: 10px; /* 文本输入框内边距为10px */
    border: 1px solid #e0e0e0; /* 文本输入框边框为1px的灰色实线 */
    border-radius: 4px; /* 文本输入框边框圆角为4px */
    width: 100%; /* 文本输入框宽度为100% */
}
.search-bar button {
    padding: 10px; /* 按钮内边距为10px */
    margin-left: 10px; /* 按钮左侧外边距为10px */
    background-color: #ffd700; /* 按钮背景颜色为金色 */
    border: none; /* 按钮无边框 */
    border-radius: 4px; /* 按钮边框圆角为4px */
    cursor: pointer; /* 鼠标悬停时显示指针形状 */
}
.nav {
    display: flex; /* 使用弹性盒子布局 */
    list-style: none; /* 移除列表的默认样式 */
}
.nav li {
    margin: 0 15px; /* 导航项左右外边距为15px */
}
.nav li a {
    text-decoration: none; /* 链接无下划线 */
    color: #333; /* 链接文字颜色为深灰色 */
}
    .nav button {
  padding: 10px; /* 内边距 */
  margin-left: 10px; /* 左侧外边距 */
  background-color: #ffd700; /* 背景颜色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 边框圆角 */
  cursor: pointer; /* 鼠标手型 */
}
#wrap {
    width: 1920px; /* 设置容器宽度为1920px */
    margin: 0 auto; /* 为了使盒子居中，设置左右外边距自动 */
    overflow: hidden; /* 隐藏溢出的内容 */
}
#nav {
    width: 60px; /* 设置导航宽度为60px */
    background-color: #f8f8f8; /* 设置导航背景颜色为浅灰色 */
    position: fixed; /* 固定定位 */
    top: 91px; /* 距离顶部91px */
    height: calc(100% - 60px); /* 高度为视口高度减去60px */
    display: flex; /* 使用弹性盒子布局 */
    flex-direction: column; /* 子项垂直排列 */
    align-items: center; /* 子项水平居中 */
}
#nav a {
    display: flex; /* 使用弹性盒子布局 */
    align-items: center; /* 子项垂直居中 */
    justify-content: center; /* 子项水平居中 */
    width: 100%; /* 宽度为100% */
    height: 60px; /* 高度为60px */
    text-decoration: none; /* 去除下划线 */
    color: #333; /* 文字颜色为深灰色 */
    margin: 5px 0; /* 上下外边距为5px */
}
#nav a:hover {
    background-color: #e0e0e0; /* 鼠标悬停时背景颜色为更浅的灰色 */
}
#nav a.active {
    background-color: #ffd700; /* 激活状态的背景颜色为金色 */
}
#nav img {
    width: 24px; /* 图片宽度为24px */
    height: 24px; /* 图片高度为24px */
    margin-right: 10px; /* 图片右侧外边距为10px */
}
.vehicle-types-container {
    text-align: center; /* 文本居中 */
    margin-top: 20px; /* 上外边距为20px */
}
#main {
    width: 900px; /* 设置主容器宽度为900px */
    display: inline-flex; /* 使用内联弹性盒子布局 */
    list-style: none; /* 去除列表样式 */
    padding: 0; /* 内边距为0 */
}
#main li {
    margin-right: 7px; /* 列表项右侧外边距为7px */
    text-align: center; /* 文本居中 */
}
#main img {
    width: 50px; /* 图片宽度为50px */
    height: 18px; /* 图片高度为18px */
}
#main span {
    display: block; /* 显示为块级元素 */
    margin-top: 5px; /* 上外边距为5px */
}
.select-vehicle {
    margin: 20px; /* 四周外边距为20px */
    text-align: center; /* 文本居中 */
}
.select-vehicle select,
.select-vehicle button {
    padding: 5px; /* 内边距为5px */
    margin-right: 10px; /* 右侧外边距为10px */
}
#ad {
    height: 60px; /* 设置高度为60px */
    clear: both; /* 清除浮动 */
}
#aside {
    width: 400px; /* 设置宽度为400px */
}
.container {
    width: 300px; /* 设置宽度为300px */
    padding: 20px; /* 内边距为20px */
    background-color: white; /* 背景颜色为白色 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    border-radius: 8px; /* 边框圆角为8px */
    position: absolute; /* 绝对定位 */
    top: 50%; /* 距离顶部50% */
    left: 50%; /* 距离左侧50% */
    transform: translate(-50%, -50%); /* 通过位移使元素居中 */
}
.container h2 {
    text-align: center; /* 文本居中 */
    margin-bottom: 20px; /* 下外边距为20px */
}
.form-group {
    margin-bottom: 15px; /* 下外边距为15px */
}
.form-group label {
    display: block; /* 显示为块级元素 */
    margin-bottom: 5px; /* 下外边距为5px */
}
.form-group input {
    width: 100%; /* 宽度为100% */
    padding: 8px; /* 内边距为8px */
    box-sizing: border-box; /* 边框和内边距包含在宽度内 */
}
.form-group button {
    width: 100%; /* 宽度为100% */
    padding: 10px; /* 内边距为10px */
    background-color: #ddc019; /* 背景颜色为金色 */
    color: white; /* 文字颜色为白色 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 边框圆角为4px */
    cursor: pointer; /* 鼠标悬停时显示指针形状 */
}
.form-group button:hover {
    background-color: #ddc019; /* 鼠标悬停时背景颜色不变 */
}
</style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="./img/logo.png" >
            <a href="http://www.dongchedi.com">懂车帝</a> 
            <select>
                <option>大连</option>
                <option>鞍山</option>
                <option>阜新</option>
                <option>葫芦岛</option>
                <option>沈阳</option>
            </select>
        </div>
        <div class="search-bar">
            <input type="text" placeholder="奔驰">
            <button>搜索</button>
        </div>
        <ul class="nav">
            <li><a href="#">业务合作</a></li>
            <li><a href="#">添加到桌面</a></li>
            <li><a href="#">小程序</a></li>
            <li><a href="#">下载App</a></li>
            <li><a href="#">发布作品</a></li>
            <li><a href="register.html"><button>登录</button></a></li>
        </ul>
    </div>
    <div id="warp">
    <div id="nav">
        <a href="./INDEX.html">
            <img src="./img/homepage.png" >
            <span>首页</span>
        </a>
        <a href="./detail.html">
            <img src="./img/selection.png" >
            <span>选车</span>
        </a>
        <a href="#">
            <img src="./img/used.png">
            <span>二手车</span>
        </a>
        <a href="#">
            <img src="./img/video.png">
            <span>视频</span>
        </a>
        <a href="#">
            <img src="./img/advice.png">
            <span>资讯</span>
        </a>
        <a href="#">
            <img src="./img/circle.png">
            <span>车友圈</span>
        </a>
        <a href="Ranking list.html">
            <img src="./img/the charts.png">
            <span>排行榜</span>
        </a>
        <a href="#">
            <img src="./img/broadcast.png">
            <span>直播</span>
        </a>
        <a href="#">
            <img src="./img/tool.png">
            <span>工具</span>
        </a>
        <a href="register.html"  class="active">
            <img src="./img/my.png">
            <span>我的</span>
        </a>
        <a href="#">
          <img src="./img/tool2.png" >
          <span>反馈</span>
      </a>
    </div>


<div class="container">
<h2>注册账号</h2>
<form action="/submit_registration" method="post">
    <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" name="username" required>
    </div>
    <div class="form-group">
        <label for="email">电子邮件</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" name="password" required>
    </div>
    <div class="form-group">
        <button type="submit">注册</button>
    </div>
</form>
</div>
</div>

</body>
</html>